<template>
  <div>
    <!-- 导航栏 (动态面板) -->
    <div id="u127" class="ax_default" data-label="导航栏" style="left: -73px; width: 1467px;">
      <div id="u127_state0" class="panel_state" data-label="State1" style="width: 1467px;">
        <div id="u127_state0_content" class="panel_state_content" style="margin-left: 73px;">

          <!-- Unnamed (矩形) -->
          <div id="u128" class="ax_default label" style="cursor: pointer;">
            <div id="u128_div" class="" tabindex="0"></div>
            <div id="u128_text" class="text ">
              <p><span>网站首页</span></p>
            </div>
          </div>

          <!-- Unnamed (矩形) -->
          <div id="u129" class="ax_default label">
            <div id="u129_div" class=""></div>
            <div id="u129_text" class="text ">
              <p><span>今日推荐</span></p>
            </div>
          </div>

          <!-- Unnamed (矩形) -->
          <div id="u130" class="ax_default label">
            <div id="u130_div" class=""></div>
            <div id="u130_text" class="text ">
              <p><span>热销排行</span></p>
            </div>
          </div>

          <!-- Unnamed (矩形) -->
          <div id="u131" class="ax_default label">
            <div id="u131_div" class=""></div>
            <div id="u131_text" class="text ">
              <p><span>新品上市</span></p>
            </div>
          </div>

          <!-- Unnamed (形状) -->
          <div id="u132" class="ax_default _形状">
            <img id="u132_img" class="img " src="@/components/css/images/home/u132.svg">
            <div id="u132_text" class="text " style="display:none; visibility: hidden">
              <p></p>
            </div>
          </div>

          <!-- Unnamed (矩形) -->
          <div id="u133" class="ax_default _文本段落">
            <div id="u133_div" class=""></div>
            <div id="u133_text" class="text ">
              <p><span>可配送至全国1000多个城市，市区内免配送费！</span></p>
            </div>
          </div>

          <!-- Unnamed (形状) -->
          <div id="u134" class="ax_default _形状">
            <img id="u134_img" class="img " src="@/components/css/images/home/u134.svg">
            <div id="u134_text" class="text " style="display:none; visibility: hidden">
              <p></p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Unnamed (组合) -->
    <div id="u139" class="ax_default" data-left="160" data-top="60" data-width="40" data-height="15">

      <!-- Unnamed (矩形) -->
      <div id="u140" class="ax_default label">
        <div id="u140_div" class=""></div>
        <div id="u140_text" class="text ">
          <p><span>深圳</span></p>
        </div>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u141" class="ax_default icon">
        <img id="u141_img" class="img " src="@/components/css/images/home/u141.svg">
        <div id="u141_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>
    </div>

    <!-- Unnamed (组合) -->
    <div id="u142" class="ax_default" data-left="0" data-top="200" data-width="260" data-height="360"
         style="cursor: pointer;">

      <!-- Unnamed (矩形) -->
      <div id="u143" class="ax_default box_1">
        <div id="u143_div" class="" tabindex="0"></div>
        <div id="u143_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u144" class="ax_default label">
        <div id="u144_div" class=""></div>
        <div id="u144_text" class="text ">
          <p><span>爱情鲜花</span></p>
        </div>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u145" class="ax_default _形状">
        <img id="u145_img" class="img " src="@/components/css/images/home/u145.svg">
        <div id="u145_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u146" class="ax_default _形状">
        <img id="u146_img" class="img " src="@/components/css/images/home/u146.svg">
        <div id="u146_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u147" class="ax_default _形状">
        <img id="u147_img" class="img " src="@/components/css/images/home/u147.svg">
        <div id="u147_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u148" class="ax_default box_1">
        <div id="u148_div" class=""></div>
        <div id="u148_text" class="text ">
          <p><span>特色送花服务</span></p>
        </div>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u149" class="ax_default _形状">
        <img id="u149_img" class="img " src="@/components/css/images/home/u149.svg">
        <div id="u149_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u150" class="ax_default _形状">
        <img id="u150_img" class="img " src="@/components/css/images/home/u150.svg">
        <div id="u150_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u151" class="ax_default _形状">
        <img id="u151_img" class="img " src="@/components/css/images/home/u151.svg">
        <div id="u151_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u152" class="ax_default label">
        <div id="u152_div" class=""></div>
        <div id="u152_text" class="text ">
          <p><span>/</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u153" class="ax_default label">
        <div id="u153_div" class=""></div>
        <div id="u153_text" class="text ">
          <p id="cache17" style=""><span id="cache18" style="">友情鲜花</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u154" class="ax_default label">
        <div id="u154_div" class=""></div>
        <div id="u154_text" class="text ">
          <p><span>问候长辈</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u155" class="ax_default label">
        <div id="u155_div" class=""></div>
        <div id="u155_text" class="text ">
          <p><span>/</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u156" class="ax_default label">
        <div id="u156_div" class=""></div>
        <div id="u156_text" class="text ">
          <p><span>回报老师</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u157" class="ax_default label">
        <div id="u157_div" class=""></div>
        <div id="u157_text" class="text ">
          <p id="cache10" style=""><span id="cache11" style="">婚庆鲜花</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u158" class="ax_default label">
        <div id="u158_div" class=""></div>
        <div id="u158_text" class="text ">
          <p><span>/</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u159" class="ax_default label">
        <div id="u159_div" class=""></div>
        <div id="u159_text" class="text ">
          <p id="cache19" style=""><span id="cache20" style="">祝贺鲜花</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u160" class="ax_default label">
        <div id="u160_div" class=""></div>
        <div id="u160_text" class="text ">
          <p><span>开业鲜花</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u161" class="ax_default label">
        <div id="u161_div" class=""></div>
        <div id="u161_text" class="text ">
          <p><span>/</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u162" class="ax_default label">
        <div id="u162_div" class=""></div>
        <div id="u162_text" class="text ">
          <p><span>商务鲜花</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u163" class="ax_default label">
        <div id="u163_div" class=""></div>
        <div id="u163_text" class="text ">
          <p><span>生日鲜花</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u164" class="ax_default label">
        <div id="u164_div" class=""></div>
        <div id="u164_text" class="text ">
          <p><span>/</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u165" class="ax_default label">
        <div id="u165_div" class=""></div>
        <div id="u165_text" class="text ">
          <p id="cache21" style=""><span id="cache22" style="">道歉鲜花</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u166" class="ax_default label">
        <div id="u166_div" class=""></div>
        <div id="u166_text" class="text ">
          <p><span>探病慰问</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u167" class="ax_default label">
        <div id="u167_div" class=""></div>
        <div id="u167_text" class="text ">
          <p><span>/</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u168" class="ax_default label">
        <div id="u168_div" class=""></div>
        <div id="u168_text" class="text ">
          <p><span>哀思鲜花</span></p>
        </div>
      </div>
    </div>

    <!-- Unnamed (图片 ) -->
    <div id="u240" class="ax_default _图片_">
      <img id="u240_img" class="img " src="@/components/css/images/home/u240.png">
      <div id="u240_text" class="text " style="display:none; visibility: hidden">
        <p></p>
      </div>
    </div>

    <!-- Unnamed (矩形) -->
    <div id="u241" class="ax_default label">
      <div id="u241_div" class=""></div>
      <div id="u241_text" class="text ">
        <p id="cache23" style=""><span id="cache24" style="">{{ accountName }}</span></p>
      </div>
    </div>

    <div>

      <!-- Unnamed (矩形) -->
      <div id="u242" class="ax_default box_1" style="cursor: pointer;" v-if="this.token===''">
        <div id="u242_div" class="" tabindex="0"></div>
        <div id="u242_text" class="text ">
          <p><span><el-link @click="handleClickToRegister()" type="info" :underline="false">注册</el-link></span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u243" class="ax_default box_1" style="cursor: pointer;" v-if="this.token===''">
        <div id="u243_div" class="" tabindex="0"></div>
        <div id="u243_text" class="text ">
          <p><span><el-link @click="handleClickToLogin()" type="info" :underline="false">登录</el-link></span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u244" class="ax_default box_1">
        <div id="u244_div" class=""></div>
        <div id="u244_text" class="text ">
          <p><span>加盟</span></p>
        </div>
      </div>

    </div>

    <!-- Unnamed (组合) -->
    <div id="u271" class="ax_default" data-left="1030" data-top="435" data-width="49" data-height="53">

      <!-- Unnamed (矩形) -->
      <div id="u272" class="ax_default label">
        <div id="u272_div" class=""></div>
        <div id="u272_text" class="text ">
          <p><span>个人中心</span></p>
        </div>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u273" class="ax_default _形状">
        <img id="u273_img" class="img " src="@/components/css/images/home/u273.svg">
        <div id="u273_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>
    </div>

    <!-- Unnamed (组合) -->
    <div id="u245" class="ax_default" data-left="1191" data-top="434" data-width="49" data-height="53">

      <!-- Unnamed (矩形) -->
      <div id="u246" class="ax_default label">
        <div id="u246_div" class=""></div>
        <div id="u246_text" class="text ">
          <p><span>我的收藏</span></p>
        </div>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u247" class="ax_default _形状">
        <img id="u247_img" class="img " src="@/components/css/images/home/u247.svg">
        <div id="u247_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>
    </div>

    <!-- Unnamed (组合) -->
    <div id="u248" class="ax_default" data-left="1272" data-top="434" data-width="49" data-height="53"
         style="cursor: pointer;">

      <!-- Unnamed (矩形) -->
      <div id="u249" class="ax_default label">
        <div id="u249_div" class="" tabindex="0"></div>
        <div id="u249_text" class="text ">
          <p><span>我的足迹</span></p>
        </div>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u250" class="ax_default _形状">
        <img id="u250_img" class="img " src="@/components/css/images/home/u250.svg">
        <div id="u250_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>
    </div>

    <!-- Unnamed (组合) -->
    <div id="u251" class="ax_default" data-left="1111" data-top="436" data-width="49" data-height="52"
         style="cursor: pointer;">

      <!-- Unnamed (矩形) -->
      <div id="u252" class="ax_default label">
        <div id="u252_div" class="" tabindex="0"></div>
        <div id="u252_text" class="text ">
          <p><span>我的订单</span></p>
        </div>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u253" class="ax_default _形状">
        <img id="u253_img" class="img " src="@/components/css/images/home/u253.svg">
        <div id="u253_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>
    </div>

    <!-- Unnamed (矩形) -->
    <div id="u254" class="ax_default box_2">
      <div id="u254_div" class=""></div>
      <div id="u254_text" class="text ">
        <p><span>规则</span></p>
      </div>
    </div>

    <!-- Unnamed (矩形) -->
    <div id="u255" class="ax_default label">
      <div id="u255_div" class=""></div>
      <div id="u255_text" class="text ">
        <p><span>2099年12月鲜花网重要新规速递</span></p>
      </div>
    </div>

    <!-- 轮播图 (组合) -->
    <div id="u257">
      <el-carousel :interval="3000" arrow="always">
        <el-carousel-item v-for="item in carouselItems" :key="item">
          <img :src="item" alt="Carousel Image"/>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div style="margin-top: 520px;">
      <div class="recommendation-container">
        <div class="recommendation-header">
          <span>今日推荐</span>
        </div>
        <div class="recommendation-items">
          <div v-for="(item, index) in products" :key="index" @click="selectProduct(index)" class="item">
            <div class="item-image-container">
              <img :src="item.image" @click="toFlower(item.flowerId)"/>
            </div>
            <div class="item-name">
              <span>{{ item.name }}</span>
            </div>
            <div class="item-description">
              <span>{{ item.description }}</span>
            </div>
            <div class="item-price">
              <span>￥{{ item.price }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div style="margin-top: 100px;">
      <div class="recommendation-container">
        <div class="recommendation-header">
          <span>热门推荐</span>
        </div>
        <div class="recommendation-items">
          <div v-for="(item, index) in products" :key="index" @click="selectProduct(index)" class="item">
            <div class="item-image-container">
              <img :src="item.image" @click="toFlower(item.flowerId)"/>
            </div>
            <div class="item-name">
              <span>{{ item.name }}</span>
            </div>
            <div class="item-description">
              <span>{{ item.description }}</span>
            </div>
            <div class="item-price">
              <span>￥{{ item.price }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <br/><br/><br/><br/><br/><br/>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      accountName: "Hi~你好",
      token: '',
      carouselItems: [
        "http://localhost:8088/image/flower-shop/u258.svg",
        "http://localhost:8088/image/flower-shop/u259.svg",
        "http://localhost:8088/image/flower-shop/u260.svg",
        "http://localhost:8088/image/flower-shop/u261.svg"
      ],
      products: [
        {
          flowerId: 1,
          image: "http://localhost:8088/image/flower-shop/home/u174-0.svg",
          name: '花01',
          description: '材料：玫瑰花向日葵小花束，9朵红玫瑰小花束；免费附送精美贺卡，代写祝福',
          price: 38.99
        },
        {
          flowerId: 2,
          image: "http://localhost:8088/image/flower-shop/home/u174-1.svg",
          name: '花02',
          description: '莫兰迪清新北欧花艺，素雅乳白色仿真玫瑰花，迷你瓶套装',
          price: 90.00
        },
        {
          flowerId: 3,
          image: "http://localhost:8088/image/flower-shop/home/u174-2.svg",
          name: '花03',
          description: '清新北欧陶瓷花瓶家居插花器花束，另配精美个性花瓶',
          price: 25.00
        },
        {
          flowerId: 4,
          image: "http://localhost:8088/image/flower-shop/home/u174-3.svg",
          name: '花04',
          description: '真花鲜花速递，本地直供，真花20枝，附送精美贺卡，代写祝福',
          price: 69.88
        }
      ],
      selectedProductIndex: 0
    };
  },
  methods: {
    selectProduct() {
      // 点击产品的处理逻辑
    },
    showMore() {
      // 显示更多的逻辑
    },
    handleClickToLogin() {
      // 跳转到Login
      this.$router.push('/login');
    },
    handleClickToRegister() {
      // 跳转到注册页面
      this.$router.push("/register");
    },
    showLoginName() {
      let accountName = sessionStorage.getItem("accountName");
      if (accountName != null) {
        this.accountName = accountName;
        this.accountId = sessionStorage.getItem("accountId");
        this.token = sessionStorage.getItem("token");
      }
    },
    toFlower(flowerId) {
      sessionStorage.setItem("flowerId", flowerId);
      this.$router.push("/flower");
    },
  },
  created() {
    this.showLoginName();
  }
}
</script>

<style scoped>
.el-link {
  color: white;
}

.recommendation-header {
  width: 1320px;
  height: 50px;
  font-size: 20px;
  font-weight: bold;
}

.recommendation-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  width: 315px;
  height: 400px;
  margin-bottom: 20px;
}

.item-image-container {
  width: 315px;
  height: 300px;
  border-radius: 5px;
}

.item-name {
  width: 315px;
  height: 50px;
  font-size: 18px;
}

.item-description {
  width: 315px;
  height: 40px;
  font-size: 13px;
}


.custom-image {
  width: 300px;
  height: 300px;
}

.recommendation-items {
  width: 1320px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding-bottom: 200px;
}

.item {
  width: 315px;
  height: 400px;
  margin-bottom: 20px;
}

.item-image-container {
  width: 315px;
  border-radius: 5px;
}

.item-name {
  width: 315px;
  height: 50px;
  font-size: 18px;
}

.item-description {
  width: 315px;
  height: 40px;
  font-size: 13px;
}

.item-price {
  width: 315px;
  height: 25px;
  font-size: 25px;
  color: #FF6E90;
}

.add-to-cart {
  width: 120px;
  height: 35px;
  border: none;
  box-shadow: none;
}

.div-to-cart {
  position: relative;
  margin-left: 160px;
  color: #ff6e90;
}

</style>